<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FocusAny Shim Test</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
            margin: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
        }

        button {
            background: linear-gradient(135deg, #007AFF, #0056CC);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 120px;
        }

        button:hover {
            background: linear-gradient(135deg, #0056CC, #003D99);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        }

        button:active {
            transform: translateY(0);
        }

        .success {
            background: linear-gradient(135deg, #52c41a, #389e0d);
        }

        .error {
            background: linear-gradient(135deg, #ff4d4f, #cf1322);
        }

        .info {
            background: linear-gradient(135deg, #1890ff, #096dd9);
        }

        #log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 13px;
            line-height: 1.5;
            max-height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .status {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
            background: #e3f2fd;
        }

        .log-entry {
            margin-bottom: 5px;
            padding: 2px 0;
        }

        .log-time {
            color: #666;
            font-weight: bold;
        }

        .log-success {
            color: #52c41a;
        }

        .log-error {
            color: #ff4d4f;
        }

        .log-info {
            color: #1890ff;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>🚀 FocusAny Shim Version Test</h1>
        <div class="status">
            <strong>Status:</strong> <span id="status">Initializing...</span>
        </div>

        <div class="button-group">
            <button onclick="testBasicNotification()">📢 Basic Notification</button>
            <button onclick="testSuccessToast()" class="success">✅ Success Toast</button>
            <button onclick="testErrorToast()" class="error">❌ Error Toast</button>
            <button onclick="testInfoToast()" class="info">ℹ️ Info Toast</button>
            <button onclick="testLongDuration()">⏰ Long Duration</button>
            <button onclick="testZeroDuration()">🔄 Permanent Notification</button>
            <button onclick="testCopyText()">📋 Copy Text</button>
            <button onclick="testPlatformDetection()">💻 Platform Detection</button>
            <button onclick="testDbOperations()">💾 Database Operations</button>
            <button onclick="clearLog()">🗑️ Clear Log</button>
        </div>

        <h3>📋 Execution Log:</h3>
        <div id="log">Waiting for test...</div>
    </div>

    <!-- Load Babel-transformed FocusAny Shim -->
    <script src="focusany-shim-browser.min.js"></script>

    <script>
        // 日志记录函数
        function addLog(message, type = 'info') {
            const log = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry log-${type}`;
            logEntry.innerHTML = `<span class="log-time">[${time}]</span> ${message}`;
            log.appendChild(logEntry);
            log.scrollTop = log.scrollHeight;
        }

        function clearLog() {
            document.getElementById('log').innerHTML = '';
            addLog('Log cleared');
        }

        function updateStatus(message, type = 'info') {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = `log-${type}`;
        }

        // Test functions
        function testBasicNotification() {
            addLog('=== Testing Basic Notification ===');
            try {
                window.focusany.showNotification("This is a basic notification test");
                addLog('✅ Basic notification call successful', 'success');
            } catch (e) {
                addLog('❌ Basic notification call failed: ' + e.message, 'error');
            }
        }

        function testSuccessToast() {
            addLog('=== Testing Success Toast ===');
            try {
                window.focusany.showToast("Operation executed successfully!", { status: "success", duration: 3000 });
                addLog('✅ Success toast call successful', 'success');
            } catch (e) {
                addLog('❌ Success toast call failed: ' + e.message, 'error');
            }
        }

        function testErrorToast() {
            addLog('=== Testing Error Toast ===');
            try {
                window.focusany.showToast("An error occurred!", { status: "error", duration: 4000 });
                addLog('✅ Error toast call successful', 'success');
            } catch (e) {
                addLog('❌ Error toast call failed: ' + e.message, 'error');
            }
        }

        function testInfoToast() {
            addLog('=== Testing Info Toast ===');
            try {
                window.focusany.showToast("This is an information message", { status: "info", duration: 2000 });
                addLog('✅ Info toast call successful', 'success');
            } catch (e) {
                addLog('❌ Info toast call failed: ' + e.message, 'error');
            }
        }

        function testLongDuration() {
            addLog('=== Testing Long Duration Notification ===');
            try {
                window.focusany.showToast("This notification will display for 10 seconds", { duration: 10000 });
                addLog('✅ Long duration notification call successful', 'success');
            } catch (e) {
                addLog('❌ Long duration notification call failed: ' + e.message, 'error');
            }
        }

        function testZeroDuration() {
            addLog('=== Testing Permanent Notification ===');
            try {
                window.focusany.showToast("This notification won't disappear automatically, click X to close", { duration: 0 });
                addLog('✅ Permanent notification call successful', 'success');
            } catch (e) {
                addLog('❌ Permanent notification call failed: ' + e.message, 'error');
            }
        }

        function testCopyText() {
            addLog('=== Testing Copy Text ===');
            try {
                const result = window.focusany.copyText("Hello from FocusAny Shim!");
                if (result) {
                    addLog('✅ Text copied successfully', 'success');
                    window.focusany.showToast("Text has been copied to clipboard", { status: "success" });
                } else {
                    addLog('❌ Text copy failed', 'error');
                }
            } catch (e) {
                addLog('❌ Copy text call failed: ' + e.message, 'error');
            }
        }

        function testPlatformDetection() {
            addLog('=== Testing Platform Detection ===');
            try {
                const isMac = window.focusany.isMacOs();
                const isWindows = window.focusany.isWindows();
                const isLinux = window.focusany.isLinux();

                addLog(`macOS: ${isMac}, Windows: ${isWindows}, Linux: ${isLinux}`);
                addLog('✅ Platform detection completed', 'success');

                let platform = 'Unknown';
                if (isMac) platform = 'macOS';
                else if (isWindows) platform = 'Windows';
                else if (isLinux) platform = 'Linux';

                window.focusany.showToast(`Detected platform: ${platform}`, { status: "info" });
            } catch (e) {
                addLog('❌ Platform detection failed: ' + e.message, 'error');
            }
        }

        function testDbOperations() {
            addLog('=== Testing Database Operations ===');
            try {
                // Test write
                const doc = {
                    _id: 'test-' + Date.now(),
                    name: 'Test Document',
                    content: 'This is a test document',
                    timestamp: new Date().toISOString()
                };

                const putResult = window.focusany.db.put(doc);
                addLog(`Document written: ${JSON.stringify(putResult)}`);

                // Test read
                const getResult = window.focusany.db.get(doc._id);
                addLog(`Document read: ${JSON.stringify(getResult)}`);

                // Test query all
                const allDocs = window.focusany.db.allDocs();
                addLog(`Total documents: ${allDocs.length}`);

                addLog('✅ Database operations test completed', 'success');
                window.focusany.showToast("Database operations test completed", { status: "success" });
            } catch (e) {
                addLog('❌ Database operations failed: ' + e.message, 'error');
            }
        }

        // Check after page load is complete
        document.addEventListener('DOMContentLoaded', function () {
            addLog('Page loading complete');

            setTimeout(() => {
                if (window.focusany) {
                    addLog('✅ FocusAny Shim loaded successfully', 'success');
                    updateStatus('✅ FocusAny Shim ready', 'success');

                    // Test available methods
                    const methods = ['showNotification', 'showToast', 'copyText', 'isMacOs', 'isWindows', 'isLinux'];
                    const availableMethods = methods.filter(method => {
                        try {
                            return typeof window.focusany[method] === 'function';
                        } catch (e) {
                            return false;
                        }
                    });

                    addLog(`Available methods: ${availableMethods.join(', ')}`);

                    // Automatically display welcome message
                    window.focusany.showToast("FocusAny Shim Babel version loaded successfully!", {
                        status: "success",
                        duration: 3000
                    });
                } else {
                    addLog('❌ FocusAny Shim failed to load', 'error');
                    updateStatus('❌ FocusAny Shim failed to load', 'error');
                }
            }, 100);
        });

        // Monitor console output
        const originalLog = console.log;
        const originalError = console.error;

        console.log = function (...args) {
            addLog('Console.log: ' + args.join(' '));
            originalLog.apply(console, args);
        };

        console.error = function (...args) {
            addLog('Console.error: ' + args.join(' '), 'error');
            originalError.apply(console, args);
        };
    </script>
</body>

</html>
